<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用域范围</title>
</head>
<body>
<script>
    /*.作用域 是指一个变量的作用范围
    *   JS中有2种作用域
    *   1.全局作用域 直接编写在script标签中的JS代码都在作用域里
    *                   它在页面打开时创建，在页面关闭时销毁
    *                   在全局作用域中有一个全局对象window
    *                   window代表浏览器的窗口它有浏览器创建，我们可以直接使用
    *                   在全局作用域中 创建的变量都会作为window对象的属性保存
    *                                  创建的函数会作为window对象的方法保存
    *                   全局作用域的变量都是全局变量，在页面的任意部分都可以访问
    *        特性：变量的声明提前
    *            使用var关键字声明的变量，会在所有代码执行前被执行，但是不会赋值
    *           但是如果声明变量时不合适var关键字，则变量不会提前声明
    *           ①函数的声明提前 使用函数的声明形式创建的函数function 函数名(){}
    *           它会在所有代码执行之前就被创建 所以我们可以在函数声明之前来调用函数
    *           ②使用好桉树表达式创建的函数，不会被声明提前，所以不能在声明之前调用
    *   2.函数作用域（局部作用域）
    *           调用函数时创建的作用域，函数执行完毕，函数作用域销毁。
    *           每调用一次函数 都会创建一个函数作用域，他们3之间是独立的
    *           在函数作用域中 可以访问到全局作用域的变量
    *           在全局作用域里无法访问到函数作用域里的变量
    *            当在函数作用域操作一个函数时，它会在自身作用域里找，如果有 就直接使用，
    *               如果没有就直接向上一级寻找，直到找到全局作用域，
    *               如果全局作用域依然没有找到，则会报错，ReferenceError 报错
    *               在函数作用域里，调用变量就近调用
    *               在函数作用域里想使用全局作用域的变量 用window对象
    *      特性:函数声明提前，
    *           使用var声明的变量，会在函数中所有代码执行之前被声明，
    *
    * */
    //举例1
    console.log( typeof window);
    //举例2
    var a=10;
    var b=15;
    console.log(window.a);//创建的变量都会作为window对象的属性保存
    console.log(window.b);//创建的变量都会作为window对象的属性保存
    console.log(window.c);//创建的变量都会作为window对象的属性保存
    //举例3
    function fun() {
        console.log("hello");
    }
    window.fun();//也可以这样写fun();一样的 创建的函数会作为window对象的方法保存
    //举例4
    var a=123;//如果去掉var 相当于window.a结果也是一样的
    console.log("a="+a);
    //举例5
    var e=10;
    function demo() {
        var f=25;
        var e="我是函数中变量e";
        console.log("e="+e);
        console.log("e="+window.e);//在函数作用域里想使用全局作用域的变量 用window对象
    }
    demo();
    // console.log(f);
    //举例6
    /*函数作用域中
      *  1.没有var就要到父级去找是否有定义过这个变量，
     *   如果父级有 做修改父级的变量，
    *    如果没有就找父父级，知道找到window级，如果不带var声明 所以这个变量最终将成为window的变量，
    *  2.如果带var 那么这个就老老实实地当变量
    * */
    var x=33;
    function fun() {
        var x=10;
    }
    fun();
    console.log("x="+x);
</script>
</body>
</html>